<template>
  <div class="border py-1 px-2 rouned mr-3 position-relative d-flex align-items-center">
    <div class="d-flex align-items-center" v-if="type != 0">
      <!-- 颜色选择器 -->
      <el-color-picker v-if="type == 1" size="mini"></el-color-picker>
      <!-- 图片选择 -->
      <span v-else class="btn btn-light border">
        <i class="el-icon-plus"></i>
      </span>
    </div>
    <input 
      value="内容"
      class="form-control border-0" 
      style="width: 80px;font-size: 12px; line-height: 32px; text-align:center; padding: 2px 5px;" 
      :value="item.name" 
      @input="inputChange">
      <!-- 删除按钮 -->
    <span 
      class="btn btn-light p-0 position-absolute" 
      style="line-height: 1; right: -8px; top: -8px;" 
      @click="delSkuValue({cardIndex, index})">
        <i class="el-icon-circle-close"></i>
    </span>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  props: {
    type: {
      type: Number,
      default: 0
    },
    item: {
      type: Object,
      default: ()=>({})
    },
    cardIndex: Number, // 父级的下标
    index: Number // 当前组件循环的下标
  },
  name:'',
  data() {
    return {

    }
  },
  methods: {
    ...mapMutations('goods_create', ['delSkuValue', 'updateSkuValue']),
    vModel(key, value){
      this.updateSkuValue({
        cardIndex: this.cardIndex, 
        index: this.index,
        key,
        value
      })
    },
    inputChange(e){
      this.vModel('name', e.target.value)
    }
  }
}
</script>

<style scoped>

</style>